<template>
	<div class="comment" v-if="orderInfo">
		<!-- <div class="space"></div> -->

		<div class="list">
			<van-card
				v-for="item in orderInfo.productList"
				:key="item.id"
				class="product-card"
				:class="{ active: show && activeId === item.id }"
				:price="item.total"
				:num="item.pronum"
				:title="item.products.name"
				:thumb="item.products.thumbs_text[0]">
				<template #price-top>
					<p class="unit-price">{{ '单价：￥' + item.price }}</p>
				</template>
				<template #price>
					<span class="price"><span>￥</span>{{ item.total }}</span>
				</template>
				<template #footer>
					<van-button class="comment-btn" type="warning" round size="small" @click="onClick(item.id)">
						点击评价
					</van-button>
          <p class="my-comment" v-if="item.comment"><span>我的评价：</span>{{ item.comment }}</p>
				</template>
			</van-card>
		</div>

		<van-popup v-model:show="show" position="bottom" :style="{ height: '70%' }" round>
			<div class="buts">
				<span class="cancel" @click="show = false">取消</span>
				<span class="confirm" @click="onConfirm">确认</span>
			</div>
			<van-field
				v-model="comment"
				rows="2"
				autosize
				label="评价"
				type="textarea"
				maxlength="200"
				placeholder="请输入评价"
				show-word-limit />
		</van-popup>
	</div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const business = proxy.$cookies.get('business');
const orderid = ref(proxy.$route.query.orderid);
const orderInfo = ref(null);
const activeId = ref(null);
const show = ref(false);
const comment = ref('');

const getData = async () => {
	const res = await proxy.$GET({
		url: '/order/info',
		params: { busid: business.id, orderid: orderid.value },
	});

	console.log(res);

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

	orderInfo.value = res.data;
};

const onClick = (id) => {
	activeId.value = id;
	show.value = true;
};

const onConfirm = async () => {
	const res = await proxy.$POST({
		url: '/order/comment',
		params: { busid: business.id, orderid: orderid.value, id: activeId.value, comment: comment.value },
	});

	if (res.code === 0) {
		proxy.$fail(res.msg);
		return;
	}

  proxy.$success(res.msg);

  show.value = false;
  getData();
};

watch(activeId, () => {
	comment.value = '';
});

getData();
</script>

<style scoped lang="scss">
.comment {
	.list {
		.product-card {
			background-color: #fff;
			margin: 8px 8px 0 8px;
			border-radius: 6px;
			padding: 10px;
			.unit-price {
				font-size: 12px;
				color: #999;
			}
			.price {
				font-size: 15px;
				font-weight: 700;
				color: #e03737;
				span {
					font-size: 12px;
				}
			}
			.comment-btn {
				position: absolute;
				top: 70px;
				right: 10px;
				margin-left: 10px;
				height: 28px;
				padding: 0 10px;
			}

			:deep(.van-card__num) {
				transform: translate(2px, -72px);
			}

			&.active {
				box-shadow: inset 0 0 0 2px #ff976a;
				transition: 0.2s;
			}
		}
	}

	.buts {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 46px;
		color: #707070;
		font-size: 14px;
		border-bottom: 1px solid #ebebeb;
		margin-bottom: 10px;
		.confirm {
			color: #1989fa;
		}
		span {
			padding: 0 16px;
		}
	}

  .my-comment{
    font-size: 13px;
    color: #666;
    text-align: start;
    padding-top: 10px;
    span{
      color: #999;
    }
  }
}
</style>
